<div class="container-fluid">
  <div class="row row-deck pt-4">
      <div class="col-md-3 mb-4" style="height:100%">
        <div class="card">
          <div class="card-status-top bg-indigo"></div>
          <div class="card-body">
            <div class="card-title text-primary">
              <strong>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"></polyline>
                  <line x1="12" y1="12" x2="20" y2="7.5"></line>
                  <line x1="12" y1="12" x2="12" y2="21"></line>
                  <line x1="12" y1="12" x2="4" y2="7.5"></line>
                </svg>
                <%= app.name %>
              </strong>
              <% if(app.status === "online"){ %>
                <span class="badge bg-green-lt"><%= app.status %></span>
                </a>
              <% } else{ %>  
                <span class="badge bg-red-lt"><%= app.status %></span>
              <% } %>
            </div>
            <h4 class="text-secondary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <rect x="3" y="4" width="18" height="8" rx="3"></rect>
                <rect x="3" y="12" width="18" height="8" rx="3"></rect>
                <line x1="7" y1="8" x2="7" y2="8.01"></line>
                <line x1="7" y1="16" x2="7" y2="16.01"></line>
              </svg>
              CPU : <%= app.cpu %> %</h4>
            <h4 class="text-secondary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop-analytics" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <rect x="3" y="4" width="18" height="12" rx="1"></rect>
                <path d="M7 20h10"></path>
                <path d="M9 16v4"></path>
                <path d="M15 16v4"></path>
                <path d="M9 12v-4"></path>
                <path d="M12 12v-1"></path>
                <path d="M15 12v-2"></path>
                <path d="M12 12v-1"></path>
              </svg>
              Memory : <%= app.memory %></h4>
            <h4 class="text-secondary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4"></path>
                <circle cx="18" cy="18" r="4"></circle>
                <path d="M15 3v4"></path>
                <path d="M7 3v4"></path>
                <path d="M3 11h16"></path>
                <path d="M18 16.496v1.504l1 1"></path>
              </svg>
              Uptime : <%= app.uptime %></h4>
            <% if(app.git_branch){ %>
            <h4 class="text-secondary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-branch" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="7" cy="18" r="2" />
                <circle cx="7" cy="6" r="2" />
                <circle cx="17" cy="6" r="2" />
                <line x1="7" y1="8" x2="7" y2="16" />
                <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
                <polyline points="14 14 17 11 20 14" />
              </svg>
              Git Branch : <%= app.git_branch %></h4>
              <% } %>
              <% if(app.git_commit){ %>
              <h4 class="text-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-commit" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <circle cx="12" cy="12" r="3" />
                  <line x1="12" y1="3" x2="12" y2="9" />
                  <line x1="12" y1="15" x2="12" y2="21" />
                </svg>
                Git Commit : <%= app.git_commit %></h4>
              <% } %>
              <% if(app.env_file){ %>
              <h4 class="text-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                  <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                  <line x1="9" y1="9" x2="10" y2="9" />
                  <line x1="9" y1="13" x2="15" y2="13" />
                  <line x1="9" y1="17" x2="15" y2="17" />
                </svg>
                Env File : 
                <a  href="#" class="btn btn-sm btn-white" data-bs-toggle="modal" data-bs-target="#modal-scrollable">
                  Open File
                </a>
              </h4>
              <% } %>
          </div>
          <div class="card-footer text-center">
            <% if(app.status === "online"){ %>
              <button class="btn btn-sm btn-green" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'reload')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                  <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
                </svg>
                Reload
              </button>
              <button class="btn btn-sm btn-cyan" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'restart')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
                  <line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
                  <line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
                  <line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
                  <line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
                  <line x1="11" y1="19.94" x2="11" y2="19.95"></line>
                </svg>
                Restart
              </button>
              <button class="btn btn-sm btn-danger" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'stop')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-minus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <circle cx="12" cy="12" r="9"></circle>
                  <line x1="9" y1="12" x2="15" y2="12"></line>
                </svg>
                Stop
              </button>
            <% } else{ %> 
              <button class="btn btn-sm btn-cyan" aria-label="Button" onclick="pm2AppAction('<%= app.name %>', 'restart')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
                  <line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
                  <line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
                  <line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
                  <line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
                  <line x1="11" y1="19.94" x2="11" y2="19.95"></line>
                </svg>
                Restart
              </button>
            <% } %>
          </div>
        </div>
      </div>
      <div class="col-md-9 mb-4">
        <div class="card">
          <ul class="nav nav-tabs" data-bs-toggle="tabs">
            <li class="nav-item">
              <a href="#stdout" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
               </svg>
                STDOUT</a>
            </li>
            <li class="nav-item">
              <a href="#stderr" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"></path>
               </svg>
                STDERR</a>
            </li>
            <li class="nav-item ms-auto">
              <button class="btn btn-icon shadow-none" style="border:none !important;" onclick="nextLogs()">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-top" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
               </svg>
              </button>
              <button class="btn btn-icon shadow-none" style="border:none !important;" onclick="refreshLogs()">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                  <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
               </svg>
              </button>
            </li>
          </ul>
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="stdout" data-next-key="<%= logs.stdout.nextKey %>">
                <code class="bg-dark" style="display:block; overflow-y:scroll; max-height:50vh !important; max-height:75vh !important; min-width:100%;"><%- logs.stdout.lines %></code>
              </div>
              <div class="tab-pane" id="stderr" data-next-key="<%= logs.stderr.nextKey %>">
                <code class="bg-dark" style="display:block; overflow-y:scroll; max-height:50vh !important; max-height:75vh !important; min-width:100%;"><%- logs.stderr.lines %></code>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<div class="modal fade" id="modal-scrollable" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><%= app.name %> [.env]</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <% if(app.env_file){ %>
          <pre><code class="language-bash"><%= app.env_file %></code></pre>
        <% } %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn ml-auto" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="/assets/js/prism.js"></script>
<script>

  function getActiveTabData(){
    const data = {
      log_type: $('.tab-pane.active').attr('id'),
      next_key: $('.tab-pane.active').attr('data-next-key')
    };
    return data
  }
  

  async function fetchLogs(log_type, next_key){
    const response = await fetch(`/api/apps/<%= app.name %>/logs/${log_type}${next_key?`?nextKey=${next_key}`: ''}`)
    const data = await response.json()
    if(data && data.logs){
      return data.logs
    }
    return null
  }

  function setLogsData(log_type, logs, action){
    $(`#${log_type}`).attr('data-next-key', logs.nextKey)
    if(action === 'refresh'){
      $(`#${log_type} code`).html(logs.lines)
    }
    else if(action === 'append'){
      $(`#${log_type} code`).append('<br/>' + logs.lines)
    }
    else if(action === 'prepend'){
      $(`#${log_type} code`).prepend(logs.lines + '<br/>')
    }
  }

  async function refreshLogs(){
    const { log_type } = getActiveTabData()
    const logs  = await fetchLogs(log_type)
    if(logs){
      setLogsData(log_type, logs, 'refresh')
    }
    else{
      console.log('Unable to fetch logs')
    }
  }

  async function nextLogs(){
    const { log_type, next_key  } = getActiveTabData()
    if(parseInt(next_key) < 0){
      console.log('End of Logs')
    }
    else{
      const logs  = await fetchLogs(log_type, next_key)
      if(logs) {
        setLogsData(log_type, logs, 'prepend')
      }
      else{
        console.log('Unable to fetch logs')
      }
    }
  }
</script>